<script setup lang="ts">
import { ShowModel, BookModel, HotMovieModel } from '@/api/webSite/response';
import { onMounted, reactive } from 'vue';
import { getShowsApi, getBooksApi, getHotMoviesApi } from '@/api/webSite';
import useElementPlusStore from '@/stores/UseElementPlusStore';

const hotMovies = reactive<Array<HotMovieModel>>([])
const showes = reactive<Array<ShowModel>>([]);
const books = reactive<Array<BookModel>>([]);
onMounted(async () => {
  Object.assign(showes, await getShowsApi())
  Object.assign(books, await getBooksApi())
  Object.assign(hotMovies, await getHotMoviesApi())
  useElementPlusStore().closeLoad();
})

</script>

<template>

  <div class="main">

    <div class="movie_cars">
      <movieCarousel :hotMovies="hotMovies"></movieCarousel>
    </div>

    <div class="moive">
      <div class="moive_title">
        <artFont class="title" :hotMovies="hotMovies">奥斯卡影片</artFont>
      </div>
      <div class="moive-body">
        <moiveCard :moiveInfo="item" class="moive-card" v-for="item in showes" :key="item.id"></moiveCard>
      </div>
    </div>

    <div class="book">
      <div class="book_title">
        <artFont>文学巨作</artFont>
      </div>
      <div class="book_body">
        <bookCard :book="item" class="book-card" v-for="item in books" :key="item.id"></bookCard>
      </div>
    </div>
  </div>

</template>

<style scoped lang="scss">
.main {
  background: $bgColor;
  display: flex;
  flex-direction: column;
  align-items: center;

  .movie_cars {
    width: 80%;
    height: 500px;
    margin-top: 110px;
  }

  .moive {
    width: 80%;

    .moive_title {
      margin-top: 25px;
    }

    .moive-body {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      .moive-card {
        margin-top: 20px;
        width: 400px;
        height: 400px;
      }

    }

  }

  .book {
    width: 80%;

    .book_title {
      margin-top: 25px;
    }

    .book_body {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      justify-content: space-between;

      .book-card {
        margin-top: 20px;
        width: 400px;
        height: 400px;
      }

    }
  }

}
</style>
